<template>
	<view class="empty" :style="[{'background': bgColor}]">
		<!-- 暂无权限 -->
		<image v-if="status=='power'" src="../../static/empty/power.png"></image>
		<!-- 暂无日程 -->
		<image v-else-if="status=='schedule'" src="../../static/empty/schedule.png"></image>
		<!-- 暂无数据/空数据 -->
		<image v-else src="../../static/empty/empty.png"></image>
		<!-- 提示内容 -->
		<view class="empty-tips" :style="[{'color': tipsColor}]">{{tips}}</view>
		<u-button v-if="btnText!=''" type="primary" @click="goBack" style="margin-top: 30rpx;">{{btnText}}</u-button>
	</view>
</template>
<script>
	export default {
		name: "empty",
		props: {
			tips: {
				type: String,
				default: ''
			},
			tipsColor: {
				type: String,
				default: '#9C9C9C'
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			status: {
				type: String,
				default: 'empty'
			},
			btnText: {
				type: String,
				default: ''
			},
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 120rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box
	}

	.empty image {
		width: 500rpx;
		height: 500rpx;
	}

	.empty .empty-tips {
		display: flex;
		font-size: 30rpx;
		color: #999999;
	}
</style>
